import React, { useState } from 'react';
import "./header.scss"
// 导入图片
import log from "../img/h_lod.png"
import lab from "../img/lab.png"
import map from "../img/map.png"
import mes from "../img/mes.png"
import pint from "../img/pint.png"
import { Carousel, Avatar, Dropdown } from 'antd';
import type { DotPosition } from 'antd/es/carousel';
import type { MenuProps } from 'antd';
import { useNavigate } from 'react-router-dom';
const Header = () => {
    const navigate = useNavigate()
    const exit = () => {
        navigate("/login")
    }
    const contentStyle: React.CSSProperties = {
        height: '50px',
        color: '#fff',
        lineHeight: '50px',
        fontWeight: "400",
        textAlign: 'left',
        background: 'rgba(67, 141, 238, 1)',
    };
    const [dotPosition] = useState<DotPosition>('left');
    const items: MenuProps['items'] = [
        {
            key: '2',
            label: (
                <span onClick={exit}>
                    退出登录
                </span>
            ),
        }
    ]
    return (
        <div className='Header'>
            <div className="h_left">
                <img src={log} alt="" />
                <span className='h_span'>C&V男优工作室</span>
            </div>
            <div className='h_center'>
                <img src={lab} alt="" />
                <span></span>
            </div>
            <div className="h_swiper">
                <Carousel autoplay dotPosition={dotPosition} dots={false}>
                    <div>
                        <h3 style={contentStyle}>商品通知广告是指通过各种广告渠道向潜在或现有客户推广新商品</h3>
                    </div>
                    <div>
                        <h3 style={contentStyle}>电子邮件广告是一种直接向客户发送推广信息的方式</h3>
                    </div>
                    <div>
                        <h3 style={contentStyle}>社交媒体广告是一种通过社交媒体平台向潜在或现有客户推广商品的方式。</h3>
                    </div>
                    <div>
                        <h3 style={contentStyle}>搜索引擎广告是一种在搜索引擎结果页面上，通过关键词广告投放向潜在或现有客户推广商品的方式</h3>
                    </div>
                    <div>
                        <h3 style={contentStyle}>短信营销是一种通过短信平台向潜在或现有客户发送推广信息的方式</h3>
                    </div>
                </Carousel>
            </div>
            <div className='h_right'>
                <div className='cart1'>
                    <img src={map} alt="" />
                    源文件
                </div>
                <div className='cart1'>
                    <img src={pint} alt="" />
                    待办
                </div>
                <div className='cart1'>
                    <img src={mes} alt="" />
                    消息
                </div>
                <div className="h_user">
                    <Avatar size="large" src="https://pic4.zhimg.com/80/v2-ee3a517a6d1ae8505f8e40773344411b_720w.webp" />
                    <Dropdown menu={{ items }} placement="bottom" arrow={{ pointAtCenter: true }}>
                        <span>吊哥</span>
                    </Dropdown>
                </div>
            </div>

        </div>
    );
};

export default Header;